<html>
<head>
    <style>
   table.k-focusable{
    position:absolute;
    }
   
    #loading{
        display: none;
        position:absolute;
        z-index:10000;
    }
    .k-grid-content{
        overflow-y:hidden;
    }
    #selectDepartment{
    	display:none;
    }
    .greenColor{
    	color:#7cfc00;
    }
    #dialogBox{
    	display:none;
    }
    
   
    </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/ui-darkness/jquery-ui-1.8.23.custom.css"  type="text/css" rel="stylesheet">
<link href="css/index.css" type="text/css" rel="stylesheet" >
<link href="kendo/styles/kendo.default.min.css" type="text/css" rel="stylesheet" >
<link href="kendo/styles/kendo.black.min.css" type="text/css" rel="stylesheet" >

<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css">
<link href="mygatt.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.0.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="dev_js/dev_all.js"></script>

<title>Status Overview</title>
</head>
<body>
<div id="selectDepartment"></div>
<div id="dialogBox" title="ผลการค้นหา">
	<div id="searchGrid" style="height: 390px"></div>
</div>

<div id="loading">Loading....</div>
<div id="body">
	<div id="tabs">
		<ul>
			<li>
				<a href="#content1">Status overview</a>
			</li>
			<!--
			<li>
				<a href="#content2">Menu schedule</a>
			</li>
			
			<li>
				<a href="#content3">Schedule</a>
			</li>
			-->
		</ul>
		<div id="content1">
		<div id="plantArea" style="padding:5px;">

		<b>PLANT</b> : <select name="plant" id="plant">
		
		<option>All-PLANT</option>
		<!-- 
		<option>PLANT2</option>
		<option>PLANT3</option>
		-->
		</select>
               <b> Search: </b><input type="text" name="search1" id="search1"/>
               <input type="submit" id="submit1" name="submit1" value="ค้นหา"/>
		</div>
				<!-- Dashboard Content-->
				<div id="content">
				
				<!-- box-->
					<div class="box">
						<div class="head">
							<div class="title">
							ชั่งสาร
							</div>
                                                        <div class="percen-work-load">
                                                        <div id="prmx">
                                                         Work Load: <span id="jobLoadPrmx"></span> Jobs(<span id="jobLoadPrmxPercentage" class="greenColor">--%</span>)
                                                         </div>
                                                        </div>
						</div>
						<div class="content">
						<!-- table-->
						   <div id="grid1" style="height: 310px"></div>
						<!-- table-->
							
						</div>
					</div>
				<!-- box-->
				<!-- box-->
					<div class="box">
						<div class="head">
						
							<div class="title">
							ผสม
							</div>
                                                        <div class="percen-work-load">
                                                         Work Load: <span id="jobLoadM5n7"></span> Jobs(<span id="jobLoadM5n7Percentage" class="greenColor">--%</span>)
                                                        </div>
						</div>
						<div class="content">
						<!-- table-->
						  <div id="grid2" style="height: 310px"></div>
						<!-- table-->
						</div>
					</div>
				<!-- box-->
				<!-- box-->
					<div class="box">
						<div class="head">
							<div class="title">
							บรรจุ
							</div>
                                                        <div class="percen-work-load">
                                                         Work Load: <span id="jobLoadFrmx"></span> Jobs(<span id="jobLoadFrmxPercentage" class="greenColor">--%</span>)
                                                        </div>
						</div>
						<div class="content">
						<!-- table-->
						  <div id="grid3" style="height: 310px"></div>
						<!-- table-->
						</div>
					</div>
				<!-- box-->
				<!-- box-->
					<div class="box">
						<div class="head">
							<div class="title">
							ประกอบ
							</div>
                                                        <div class="percen-work-load">
                                                         Work Load: <span id="jobLoadApkx"></span> Jobs(<span id="jobLoadApkxPercentage" class="greenColor">--%</span>)
                                                         
                                                        </div>
						</div>
						<div class="content">
						<!-- table-->
						  <div id="grid4" style="height: 310px"></div>
						<!-- box-->
				
				</div><!-- content1-->
				
				<!-- Dashboard Content-->
				<br style="clear:both">
				
			</div>
			<div id="content2">
			<!-- ganttChat-->

			<!-- ganttChat-->
				</div>
			<div id="content4">
			<!-- ganttChat-->

			<!-- ganttChat-->
				</div>
				<br style="clear:both">
	</div>
	
</div>
<div id="content3">
			<!-- ganttChat-->

			<!-- ganttChat-->
				</div>
 </div>
 </div>         
</body>
</html>